<template>

    <XSearch :fields='searchFields' @search='search' />

    <!-- <div class='flex-align-items-center'>
        <span>选择股票：</span>
        <a-input  :class='$style.ctr' size='mini' placeholder='请选择股票' />
        <span class='m-l-30'>选择年份：</span>
        <a-date-picker :class='$style.ctr' picker='year' />
    </div> -->

    <div class='m-t-20'>
        <template v-if='!loading'>
            <a-descriptions :class='$style.table' :column='2' bordered>
                <a-descriptions-item label="股票名">
                    <span style='color:#1890ff;font-weight:bold'>
                        {{data.name || '---'}}<template v-if='data.code'>/{{data.code}}</template>
                    </span>
                </a-descriptions-item>
                <a-descriptions-item label="得分">
                    <span style='color:red;font-weight:bold'>
                        {{data.score === '' ? '---' : data.score}}/{{data.count === '' ? '---' : data.count}}
                    </span>
                </a-descriptions-item>
                <a-descriptions-item label="风险因子" :span='2'>
                    <div :class='$style.header'>
                        <template v-for='(item, index) in data.factor.header' :key='index'>
                            <div :class='$style.cell'>{{item}}</div>
                        </template>
                    </div>
                    
                    <div :class='$style.body'>
                        <template v-for='(item, index) in data.factor.values' :key='index'>
                            <div :class='$style.cell' style="color:red">{{item}}</div>
                        </template>
                    </div>
                    
                </a-descriptions-item>
            </a-descriptions>
        </template>
        <template v-else>
            <a-skeleton active />
        </template>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref } from "@vue/reactivity";
import { Filter } from "@/type";
import { getScoreApi } from '@/api/finance'
import { message } from "ant-design-vue";

    const searchFields = reactive<Filter[]>([
        {
            type : 'StockSelect',
            label : '股票',
            name : 'code',
            options : {
                type : 1
            }
        },

        {
            type : 'datePicker',
            label : '年份',
            name : 'date',
            options : {
                picker : 'year',
                valueFormat : 'YYYY'
            }
        }
    ])

    const data = reactive({
        name : '',
        code : '',
        score : '',
        count : '',
        factor : {
            header : [],
            values : []
        }
    })

    const loading = ref(false)

    async function search(params) {
        if(loading.value) return
        if(params.code == undefined) {
            message.error('请选择股票')
            return
        }

        if(params.date == undefined) {
            message.error('请选择年份')
            return
        }

        data.factor.header.splice(0)
        data.factor.values.splice(0)

        loading.value = true
        const res = await getScoreApi(params)
        loading.value = false
        
        if(res.success) {
            data.name = res.data.name
            data.code = res.data.code
            data.count = res.data.count
            data.score = res.data.score
            
            for(let k in res.data.rick_factor) {
                data.factor.header.push(k)
                data.factor.values.push(res.data.rick_factor[k])
            }

        }else {
            message.error(res.message)
        }
    }

</script>


<style lang='scss' module>
    .ctr{
        width: 180px;
    }

    .table {
        th, td{
                text-align: center;
            }
    }

    .header{
        display: flex;
        .cell{
            flex: 1;
            font-size: 12px;
            color: #8c8c8c;
            text-align: center;
        }
    }

    .body{
        display: flex;
        .cell{
            flex: 1;
            font-size: 14px;
            text-align: center;
            padding: 5px 0;
        }

        
    }
</style>